<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="12rem">
		<el-row type="flex" :gutter="10">
			<el-col :span="24">
				<el-form-item label="头像照片(500*500)" prop="img">
					<el-upload-image v-model="formData.img" :disabled="true" :limit="8" :title="title"></el-upload-image>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="供应商名称" prop="nickname">
					<el-input v-model="formData.nickname" clearable placeholder="请输入供应商名称"></el-input>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="志愿者名称" prop="name">
					<el-input v-model="formData.name" disabled clearable placeholder="请输入志愿者名称"></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="志愿者标签" prop="type">
					<el-select v-model="formData.type" disabled size="mini" multiple placeholder="请选择志愿者标签" 
						>
						<el-option v-for="item in typelist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="性别" prop="sex">
					<el-select v-model="formData.sex" size="mini" disabled placeholder="请选择性别">
						<el-option v-for="item in sexlist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="志愿者标签" prop="lable">
					<div style="display: flex;">
						<div style="margin-left: 10px;" v-for="(item, index) in formData.label" :key="index">
							{{ item.major_name }}
						</div>
					</div>
					<!-- <el-select v-model="formData.lable" size="mini" disabled multiple placeholder="请选择标签" 
						>
						<el-option v-for="item in label" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select> -->
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="联系电话" prop="phoneNumber">
					<el-input v-model="formData.phoneNumber" disabled type="number" clearable
						placeholder="请输入联系电话"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="地址" prop="province_name">
					<el-input v-model="formData.province_name" disabled clearable placeholder="请输入地址"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="详细地址" prop="address">
					<el-input v-model="formData.address" disabled clearable placeholder="请输入地址"></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="专业" prop="major">
					<el-select v-model="formData.major" disabled size="mini"   placeholder="请选择专业"
						>
						<el-option v-for="item in sexlist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="生日" prop="birthday">
					<el-date-picker v-model="formData.birthday" type="date" placeholder="选择日期" disabled>
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="时间段标签" prop="lable">
					<div style="display: flex;">
						<div style="margin-left: 10px;" v-for="(item, index) in formData.time" :key="index">
							{{ item.start_time }}-{{ item.end_time }}
						</div>
					</div>
					<!-- <el-select v-model="formData.lable" size="mini" disabled multiple placeholder="请选择标签" 
						>
						<el-option v-for="item in label" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select> -->
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="教龄开始时间" prop="work_start">
				    <el-date-picker
				        type="date"
						disabled
				        placeholder="请选择"
				        format="yyyy-MM-dd"
				        value-format="yyyy-MM-dd"
				        v-model="formData.work_start"
				    ></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="教龄结束时间" prop="work_end">
				    <el-date-picker
				        type="date"
						disabled
				        placeholder="请选择"
				        format="yyyy-MM-dd"
				        value-format="yyyy-MM-dd"
				        v-model="formData.work_end"
				    ></el-date-picker>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="是否党员" prop="is_dy">
					<el-radio-group v-model="formData.is_dy">
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>

				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="职业" prop="work_name">
					<el-input v-model="formData.work_name" disabled clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" disabled clearable type="textarea" placeholder="请输入老师简介"></el-input>
				</el-form-item>
			</el-col>

			<el-col :span="24">
				<el-form-item label="证书" prop="file">
					<el-upload-image v-model="formData.file" :disabled="true" :limit="8" :title="title"></el-upload-image>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="图片" prop="img">
					<el-upload-image v-model="formData.img" :disabled="true" :limit="8" :title="title"></el-upload-image>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="24">
			    <el-form-item prop="content" label-width="0px">
			        <div style="border: 1px solid #ccc;">
			            <Toolbar
			                style="border-bottom: 1px solid #ccc"
			                :editor="editor"
			                :defaultConfig="toolbarConfig"
			                :mode="mode"
			            />
			            <Editor
			                style="height: 500px; overflow-y: auto;"
			                v-model="formData.content"
			                :defaultConfig="editorConfig"
			                :mode="mode"
			                @onCreated="onCreated"
			            />
			        </div>
			    </el-form-item>
			</el-col> -->
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" disabled icon="el-icon-check" @click="onConfirm">确认</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
	name: "member-search",
	props: {
		formData: {
			type: Object,
			default: () => { }
		},
	},
	components: {
		"el-upload-image": () => import("@/components/el-upload-image.vue"),
		"el-upload-file": () => import("@/components/el-upload-file.vue"),
		Editor,
		Toolbar
	},
	data() {
		return {
			editor: null,
			toolbarConfig: {},
			editorConfig: {
				MENU_CONF: {
					uploadImage: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn(
								$store.getters.baseUrl + res.data.file.url
							);
						}
					},
					uploadVideo: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
				}
			},
			mode: "default",
			formRules: {
				avator: [{
					required: true,
					message: '请上传',
					trigger: 'change'
				}],
				type: [{ required: true, message: '请选择', trigger: 'change' },],
				name: [{ required: true, message: '请输入', trigger: 'change' },],
				sex: [{ required: true, message: '请选择', trigger: 'change' },],
				lable: [{ required: true, message: '请选择', trigger: 'change' },],
				mobile: [
					{
						required: true,
						message: "此项为必填项"
					},
					{
						min: 11,
						// pattern: /^0?1[3|4|5|6|7|8][0-9]\d{8}$/,
						message: "手机号格式错误",
						trigger: "blur"
					}
				],
				school: [{ required: true, message: '请输入', trigger: 'change' },],
				major: [{ required: true, message: '请选择', trigger: 'change' }],
				birthday: [{ required: true, message: '请选择', trigger: 'change' }],
				work_start: [{ required: true, message: '请选择', trigger: 'change' }],
				work_end: [{ required: true, message: '请选择', trigger: 'change' }],
				entry_time: [{ required: true, message: '请选择', trigger: 'change' }],
				desc: [{ required: true, message: '请输入', trigger: 'change' }],
				other_file: [{ required: true, message: '请选择', trigger: 'change' }],
				content: {
					required: true,
					message: "此项为必填项"
				},
			},
			title: '请上传1:1比例的图片',
			sexlist: [{ id: 0, title: '保密' }, { id: 1, title: '男' }, { id: 2, title: '女' }],//{ label: '保密', value: 0},{ label: '男', value: 1 },{ label: '女', value: 2 }
			typelist: [{ id: 1, title: '全职' }, { id: 2, title: '兼职' }],//类型1全职2兼职
		};
	},
	beforeDestroy() {
		const editor = this.editor;
		if (editor == null) return;
		editor.destroy();
	},
	methods: {
		onCreated(editor) {
			this.editor = Object.seal(editor);
		},
		onConfirm() {

			this.$refs.formRef.validate((valid) => {
				if (valid) {

					this.formData.supplier_id = this.$store.state.id
					// alert('submit!');
					console.log(this.formData)
					this.$emit("search", this.formData);
					this.$parent.$emit("update:visible", false);
					this.$refs.formRef.resetFields()
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		onCancel() {
			this.$parent.$emit("update:visible", false);
			this.$refs.formRef.resetFields();
		}
	}
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
